<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="command/echarts/echarts.min.js"></script>
    <script src="command/jquery/jquery-3.4.1.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:500px;"></div>
<script type="text/javascript">
    let m2R2Data = [];
    let totalNum = 0;

    $.ajax({
        url: "/getEcTypeList",         //设置数据访问接口
        method:"PUT",
        dataType:"json",
        async: false,
        success: function (data) {
            for (let i = 0; i < data.length; i++){
                totalNum += data[i].value;
                let da = data[i];
                da["name"] = (data[i].legendname + "  "+data[i].value).toString();
                m2R2Data.push(da);
            }
        },
        error :function(errorMsg) {//请求失败执行的方法
            alert("获取后台数据失败！");
        }
    });
    console.log("获取所有的标题"+m2R2Data);

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var  option = {
        title: [
            {
                text: '应用类别数量占比',
                textStyle: {
                    fontSize: 16,
                    color: "black"
                },
                left: "2%"
            },
            {
                text: '合计',
                subtext: totalNum+'个',
                textStyle:{
                    fontSize:20,
                    color:"black"
                },
                subtextStyle: {
                    fontSize: 20,
                    color: 'black'
                },
                textAlign:"center",
                x: '34.5%',
                y: '44%',
            }],
        tooltip: {
            trigger: 'item',
            formatter:function (parms){
                var str=  parms.seriesName+"</br>"+
                    parms.marker+""+parms.data.legendname+"</br>"+
                    "数量："+ parms.data.value+"</br>"+
                    "占比："+ parms.percent+"%";
                return  str ;
            }
        },
        legend: {
            type:"scroll",
            orient: 'vertical',
            left:'70%',
            align:'left',
            top:'middle',
            textStyle: {
                color:'#8C8C8C'
            },
            height:250
        },
        series: [
            {
                name:'应用数量',
                type:'pie',
                center: ['35%', '50%'],
                radius: ['40%', '65%'],
                clockwise: false, //饼图的扇区是否是顺时针排布
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: true,
                        position: 'outter',
                        formatter:function (parms){
                            return parms.data.legendname
                        }
                    }
                },
                labelLine: {
                    normal: {
                        length:5,
                        length2:3,
                        smooth:true,
                    }
                },
                data:m2R2Data
            }
        ]
    };




    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>